<template>
  <div class="app">
    <HeaderCom></HeaderCom>
    <div class="middle">
      <NavCom></NavCom>
      <MainCom></MainCom>
    </div>
    <FooterCom></FooterCom>
  </div>
</template>
<script>
//引入组件
import FooterCom from "./components/FooterCom.vue";
import NavCom from "./components/NavCom.vue";
import MainCom from "./components/MainCom.vue";
import HeaderCom from "./components/HeaderCom.vue";
export default {
  name: "App",
  //注册组件
  components: {
    FooterCom,
    NavCom,
    MainCom,
    HeaderCom,
  },
  data() {
    return {};
  },
  created() {},
  computed: {},
  methods: {},
};
</script>
<style lang='less'  scoped>
.app {
  padding: 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  width: 200px;
  height: 300px;
  background-color: #4bacc6;
  .middle {
    display: flex;
    justify-content: space-between;
  }
}
</style>
